<script setup>
import { ref, onMounted, reactive, computed, watch } from 'vue'
import axios from "axios"
//当挂载后时请求数据
onMounted(() => {
  axios.get("http://122.112.161.135:8000/cart").then((res) => {
    res.data
    console.log(res.data);
    good.value = res.data
  })
})
const good = ref([])
const total = computed(() => {
  let num = 0
  good.value.forEach(item => {
    if (item.isSelected == true) {
      num += item.productPrice * item.productCount
    }
  })
  return num
})
//实现小计功能
const singleTotal = computed(() => {
  return function (id) {
    let total = 0
    good.value.forEach((item) => {
      if (item.id == id) {
        total = item.productPrice * item.productCount
      }
    })
    return total.toFixed(2)
  }
})
function filters(productPrice) {
  return '￥' + productPrice.toFixed(2)
}
function handleRemove(book) {
  good.value = good.value.filter((t) => t !== book)
}
// 过滤未选中的数据
const filterAll = computed(() => good.value.filter((item) => item.isSelected == false))
// 全选全不选
function hanleAll() {
  // 如果有未选中的就全选
  if (filterAll._value.length) {
    good.value.forEach((item) => {
      item.isSelected = true
    })
  } else {
    good.value.forEach((item) => {
      item.isSelected = false
    })
  }
}
</script>

<template>
  <div id="app">
    <h1>购物车</h1>
    <table>
      <tr>
        <th>全选 <input type="checkbox" @change="hanleAll" :checked="!filterAll.length"></th>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-for="book in good" :key="book.id">
        <!-- id -->
        <td><input type="checkbox" @change="book.isSelected = !book.isSelected" :checked="book.isSelected">{{ book.id }}
        </td>
        <!-- 商品 -->
        <td class="goods"><img :src="book.productCover" alt="">{{ book.productName }} </td>
        <!-- 单价 -->
        <td>{{ filters(book.productPrice) }}</td>
        <!-- 数量 -->
        <td><div class="container">
          <input type="text" v-model="book.productCount" />
          <button class="iconfont icon-up" @click="book.productCount++"></button><button class="iconfont icon-down"
            @click="book.productCount--" :disabled="book.productCount < 1"></button>
        </div>
        </td>
        <!-- 小计 -->
        <td>￥{{ singleTotal(book.id) }}</td>
        <td><button class="rem" @click="handleRemove(book)">移除</button></td>
      </tr>
      <tr v-if="good.length">
        <td class="total" colspan="6">总价格:{{ filters(total) }}</td>
      </tr>
      <tr v-else>
        <td class="none" colspan="6">购物车清空了！</td>
      </tr>
    </table>
  </div>
</template>
<style scoped>
@import "http://at.alicdn.com/t/c/font_3660363_6q0v4awm9ow.css";
#app {
  width: 100%;
  margin: 50px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 18px;
}

h1 {
  width: 1100px;
  color: green;
}

table,
tr,
th,
td {
  border: 1px solid #ddd;
  border-collapse: collapse;
  padding: 10px;
  min-width: 110px;
}

th {
  font-weight: 1000;
}

.total {
  text-align: right;
}

.goods {
  line-height: 150px;
  text-align: left;
}

img {
  width: 20%;
  height: 20%;
  float: left
}


input{
  width: 20px;
  height: 20px;
}
.container {
  position: relative;
}

.container input {
  width: 35px;
  height: 26px;
}

/* .container input:hover + button {
  display: block;
} */
.container button {
  position: absolute;
  width: 13px;
  height: 13px;
  font-size: 5px;
  padding: 0px;
  color: rgb(107, 103, 103);
  border: none;
  /* display: none; */
}

.container button:hover {
  background-color: #ccc;
}

.container .icon-up {
  left: 48px;
  top: 5px;
}

.container .icon-down {
  left: 48px;
  top: 16px;
}
.rem{
  background-color: red;
  border: 0;
  width: 50px;
  height: 30px;
  border-radius: 15%;
  color: #fff;
}
</style>